<?php /*a:3:{s:67:"D:\phpstudy_pro\WWW\oldi-erp\app\admin\view\products\attribute.html";i:1743156289;s:62:"D:\phpstudy_pro\WWW\oldi-erp\app\admin\view\public\header.html";i:1742347314;s:61:"D:\phpstudy_pro\WWW\oldi-erp\app\admin\view\public\style.html";i:1742347314;}*/ ?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ERP</title>

    <link rel="stylesheet" href="/static/css/element-ui@2.15.14.css">
    <script src="/static/js/vue.js"></script>
    <script src="/static/js/element-ui@2.15.14.js"></script>
    <script src="/static/js/axios.js"></script>
    <script src="/static/js/qs.js"></script>
    <script src="/static/js/config.js"></script>
    <script src="/static/js/echart.js"></script>
</head>


<style scoped>
    .el-select-dropdown {
      padding: 0;
    }
    </style>
     <style>
    html,
    body,
    #app {
        padding: 0;
        margin: 0;
    }    
    #contenr{
        padding: 0;
        margin: 10px;
    }
</style>

<body>
    <div id="app"  v-cloak>
        <div id="contenr">
    <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>产品管理</el-breadcrumb-item>
        <el-breadcrumb-item>属性列表</el-breadcrumb-item>
    </el-breadcrumb>
    <br>
        <el-card >
            <div style="display: flex;align-items: center;justify-content: flex-start;">
                <el-form :inline="true" :model="searchForm" size="mini"  ref="refsearchForm">                
                    <el-form-item label="属性名称">                     
                        <el-input v-model="searchForm.name" placeholder="请输入属性名称" clearable filterable></el-input>
                    </el-form-item> 
                    <el-form-item label="属性Code">                     
                        <el-input v-model="searchForm.code" placeholder="请输入属性Code" clearable filterable></el-input>
                    </el-form-item> 
                    <el-form-item label="属性状态">
                        <el-select v-model="searchForm.status" placeholder="请选择属性状态" filterable clearable>
                            <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item> 
                    <el-form-item>
                        <el-button type="primary"  size="mini" plain @click="getSearch" icon="el-icon-search" v-cloak>查询</el-button>
                    </el-form-item>          
                  </el-form>

                 
                
                <div style="margin-left: auto;margin-bottom: 20px;margin-right: 20px;" >
                        <el-button  type="primary"   @click="create" size="mini"  icon="el-icon-edit" >添加属性</el-button>       
                </div>
            </div>

            <el-table :data="tablelist"   style="width: 100%;margin-bottom: 20px;"  row-key="id"  border >
                <el-table-column   prop="id" label="ID" width="80"> </el-table-column>
                <el-table-column   prop="name" label="属性名称" width="100"> </el-table-column>  
                <el-table-column   prop="code" label="属性code" width="100"> </el-table-column>   
                <el-table-column   prop="values" label="属性值"> </el-table-column>   
                <el-table-column   prop="status"  label="属性状态" width="100"> 
                        <template v-slot="{row}">
                            <span v-if="row.status===1">
                                <el-tag type="success">启用</el-tag>
                             </span>
                             <span   v-if="row.status===0">
                                <el-tag type="danger">禁用</el-tag>                                                
                            </span>   
                    </template>                          
                </el-table-column>         
                <el-table-column  fixed="right" label="操作" width="220">
                    <template v-slot="{row}">
                        <el-button type="primary"  plain  icon="el-icon-edit"   @click="editor(row)" >编辑 </el-button>
                        <el-button type="danger"  plain   icon="el-icon-delete"  @click="cancel(row.id)">删除</el-button>             
                    </template>
                </el-table-column>
            </el-table>

            <!-- page -->            
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchForm.pagenum" :page-sizes="[20,50,100, 150, 300,500,1000,2000]"
                :page-size="searchForm.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>  
        </el-card>        
       

        <!-- 修改编辑弹窗 -->
        <el-dialog :title="title" :visible.sync="isattributeVisible " width="600px" :close-on-click-modal="false">
            <el-form :inline="true" :model="createForm" size="mini"  :rules="isAttributerules"  ref="refsearchForm"  :popper-append-to-body="false"  >              
            
                <el-form-item prop="name" label="属性名字">
                    <el-input v-model="createForm.name" placeholder="请输入属性名字：如：颜色，尺寸，型号" style="width: 370px;" clearable></el-input>
                </el-form-item>
                   
                <el-form-item prop="code" label="属性Code">
                    <el-input v-model="createForm.code" placeholder="请输入属性code：如：color，size，model" style="width: 370px;"
                            clearable></el-input>
                </el-form-item>  
                <div>  
                    <el-form-item prop="values" label="属 性 值">
                        <el-input  type="textarea"  placeholder="请输入属性值：如：S，XL，M, 等用英文逗号隔开" v-model="createForm.values" style="width: 370px;margin-left: 10px;">
                      </el-input>
                    </el-form-item>   
               </div>  
               <div>      
                <el-form-item  label="属性状态:">                                  
                    <el-radio-group v-model="createForm.status"  style="margin-left: 10px;">         
                        <template>            
                        <el-radio :label="1"  >正常</el-radio>   
                        <el-radio :label="0"  >关闭</el-radio>                     
                    </template>
                    </el-radio-group>                
                </el-form-item> 
            </div>                    
                <div>                                   
                    <el-form-item>
                        <el-button type="primary" @click="checkSubmits">确认</el-button>
                        <el-button type="primary" plain @click="close"> 取消</el-button>
                    </el-form-item>
                </div>
            </el-form>
        </el-dialog>
           
        
</div>

<script>
  new Vue({
      el: '#app',
      data: function () {
            return {       
                title:'',
                isattributeVisible:false,
                createForm:{
                    values:'',
                    status:'',
                    code:'',
                    name:'',
                    },
                searchForm:{   
                    name:'',     
                    code:'', 
                    status:'',    
                    pagesize:20,
                    pagenum:1, 
                } , //搜索条件
                status:[                   
                    {
                        value: 1,
                        label: '正常'
                    },
                    {
                        value: 2,
                        label: '关闭'
                    },
                ],// 状态是否正常              
        
                total:'',   //分页总页数      
                tablelist:'' ,              
                isAttributerules: {                      
                    name: [
                        { required: true, message: '请填写属性名称', trigger: 'blur' },
                        
                    ], 
                    code: [
                        { required: true, message: '请填写属性Code', trigger: 'blur' },
                        
                    ], 
                    values: [
                        { required: true, message: '请填写属性值', trigger: 'blur' },
                        
                    ], 
                }
            }
      },
      mounted(){        
          this.getSearch()
      },
      methods: {        

          async getDatalist() {
            const res = await axios.post('/Admin/products/attribute', {params: this.searchForm})
                if (res.status !== 1) {
                    return this.$message.error(res.info);
                }
               this.total = res.info.total
               this.tablelist = res.info.list

          },
            
          handleSizeChange(newSize) {
              this.searchForm.pagesize = newSize
              this.getDatalist()
          },
          handleCurrentChange(newPage) {
              this.searchForm.pagenum = newPage
              this.getDatalist()
          },
          handleSelectionChange(val) {
              this.multipleSelection = val;
          },     
          getSearch() {
              this.searchForm.pagenum = 1
              this.getDatalist()
          },
       
          //删除
          cancel($id){
                this.$confirm('确认需要删除？删除了无法恢复', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    closeOnClickModal: false, // 禁用点击遮罩关闭弹窗
                    type: 'warning'
                }).then(() => {
                    axios.post('/Admin/products/attribute_delete', {params: {id: $id}}).then(res => {
                        if (res.status !== 1) {
                            return this.$message.error(res.info);             
                        }                    
                        this.$message.success('删除成功');
                        this.getDatalist()
                    }).catch(err => {
                        console.log(err)
                    })
                }).catch(() => {
                    this.$message.info('已取消');
                    });
                },
        
        //编辑
          editor(row){
              this.title = '编辑属性'
              this.isattributeVisible = true
              this.$set(this.createForm,'id',row.id);
              this.$set(this.createForm,'code',row.code);
              this.$set(this.createForm,'name',row.name);
              this.$set(this.createForm,'values',row.values);
              this.$set(this.createForm,'status',row.status);                    
          },
          //添加权限
        create(){  
              this.title = '添加属性'
              this.isattributeVisible = true
              this.createForm.id = ''
              this.createForm.status = 1
              this.createForm.values = ''
              this.createForm.name = ''  
              this.createForm.code = ''             
          }, 
        async checkSubmits(){
            this.$refs.refsearchForm.validate(async valid => {
                if (!valid) return;
                let loading = this.$loading({
                    lock: true,
                    text: '数据修改中···',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });                

               axios.post('/Admin/products/attribute_create', {params: this.createForm}).then(res => {
                    loading.close()
                    if (res.status !== 1) {
                        return this.$message.error(res.info);                  
                    }
                
                    this.$message.success('操作成功');
                    this.isattributeVisible = false
                    this.getDatalist()
                }).catch(err => {
                    console.log(err)
                })
            })
        } ,
        //关闭弹窗
        close(){
            this.isattributeVisible=false  
        },  
    }
})
  </script>
  
</html>
